<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <style>
    /* a{
      width:150px;
      height: 30px;
      background-color: black;
      color: darkgoldenrod;
      border-radius: 10px;
      display: block;
      text-align: center;
      line-height: 30px;
      text-decoration: none;
      margin-bottom:10px; 
    } */
    input{
      width: 150px;
      height: 30px;
      background-color: black;
      color:chocolate;
      border-radius: 10px;
      border:0px;
      outline: none;
      display: block;
      margin-bottom: 5px;
    }
  </style> -->
  <!-- <style>
    .one {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .two {
      animation: change 10s linear forwards;
    }
    @keyframes change{
      0% {
        width: 200px;
        height: 200px;
        background-color: green;
        margin-left: 0px;
      }
      50% {
        border-radius: 50%;
        background-color: pink;
        margin-left: 0px;
      }
      60% {
        border-radius: 50%;
        background-color: pink;
        margin-left: 0px;
      }
      100%{
        margin-left: 700px;
        border-radius:50%;
        background-color:pink;
      }
    }
  </style> -->
  <!-- <style>
    input{
      width: 100px;
      height: 30px;
      margin-bottom:5px; 
      background-color:burlywood;
      color:chocolate;
      border-radius: 5px;
      outline:none;
      border: 0px;
      display: block;

    }
    .one {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .two {
      animation: change 10s linear forwards;
    }
    @keyframes change{
      0% {
        width: 200px;
        height: 200px;
        background-color: green;
      }
      50%{
        border-radius: 50%;
        background-color: pink;
        margin-left: 0px;
      }
      60%{
        border-radius: 50%;
        background-color: pink;
        margin-left: 0px;
      }
      100%{
        border-radius: 50%;
        background-color: pink;
        margin-left: 700px;
      }
    }
  </style> -->
  <!-- <style>
    .http {
      width: 500px;
      height: 50px;
      background-color: red;
      color:yellow;
      text-align: center;
      line-height: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 20px;
    }
    .title{
      width: 500px;
      height: 50;
      background-color: black;
      color: yellow;
      text-align: center;
      line-height: 50px;
      border-radius:20px;
      
    }
  </style> -->
  <!-- <style>
    div{
      width: 500px;
      height: 50px;
      background-color: red;
      border-radius: 20px;
      text-align: center; 
      line-height: 50px;
      color:yellow;
      margin-top:10px;
    }
    .title{
      background-color: black;
    }
  </style> -->
  <!-- <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }
    .box{
      width: 500px;
      margin-left: 200px;
    }
    .title img{
      width: 100px;
    }
    .content{
      width: 400px;
      height: 250px;
      border:1px solid black;
    }
    .content img{
      width: 100%;
      height: 100%;
    }
  </style> -->
  
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      background-color: #ccc;
    }
    .box{
      width: 500px;
      margin-left: 100px;
    }
    .title img{
      width: 100px;
    }
    .content img {
      width: 400px;
      height: 250px;
      border: 1px solid #000;
    }
  </style> -->
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }
    .box{
      margin-left: 100px;
    }
    .title img{
      width: 100px;
    }
    .content img{
      width: 400px;
      height: 250px;
      border:1px solid black;
    }
  </style> -->
  <style>
    span{
      color:coral;
    }
  </style>
  
  <input type="text" placeholder="请输入手机号">
  <span></span>
  <input type="button" value="下一步">
  <script>
    var input_text = document.querySelector('input[type="text"]');
    var span = document.querySelector('span');
    var btn = document.querySelector('input[type="button"]')
    btn.onclick = function(){
      if(!isNaN(input_text.value) && input_text.value.length === 11){
        span.innerHTML = '注册合法'
      }else{
        span.innerHTML ='输入有误'
      }
    }
  </script>

</head>
<body>
  <!-- <ul id='list1'>
    <li>第一个列表1</li>
    <li>第一个列表2</li>
    <li>第一个列表3</li>
    <li>第一个列表4</li>
  </ul>
  <ul id='list2'>
    <li>第二个列表1</li>
    <li>第二个列表2</li>
    <li>第二个列表3</li>
    <li>第二个列表4</li>
  </ul>
  <script>
    //作业1
    //通过标签名获取页面中所有第一个li中的文字内容
    var ul = document.getElementsByTagName('ul');
    console.log(ul);
    var lis1 = ul[0].getElementsByTagName('li');
    console.log(lis1[0].innerHTML)
    var lis2 = ul[1].getElementsByTagName('li');
    console.log(lis2[0].innerHTML)
    //通过选择器方式获取第一个列表中的所有li
    var lis = document.querySelectorAll('#list1 li')
    console.log(lis)
    for(var i=0;i<lis.length;i++){
      console.log(lis[i].innerText)
    }
    //选中单独一个标签
    var li = document.querySelector('#list2 li:nth-child(3)')
    console.log(li.innerText);
  </script> -->
    <!-- <a href="javascript:;">点击切换图片</a>
    <img src="img/wc.jpg" alt="">
    <script>
      var a = document.querySelector('a');
      var img = document.querySelector('img');
      a.onclick = function(){
        if(img.src.indexOf('img/wc.jpg') != -1){
          img.src = 'img/mm.gif';
        }else{
          img.src ='img/wc.jpg';
        }
      }
  </script> -->
    <!-- <input type="button" value="点击切换图片">
    <img src="img/wc.jpg" alt="">
    <script>
      var btn = document.querySelector('input')
      var img = document.querySelector('img')
      btn.onclick =function(){
        if(img.src.indexOf('img/wc.jpg') != -1){
          img.src = 'img/mm.gif'
        }else{
          img.src = 'img/wc.jpg'
        }
      }
  </script> -->
  <!-- <input type="button" value="走起">
  <div class="one"></div>
  <script>
  var btn = document.querySelector('input');
  var div = document.querySelector('div')
  btn.onclick = function(){
    div.className = 'one two'
    console.log(div)
  }
  </script> -->
  <!-- 作业3动画效果 -->
  <!-- <input type="button" value="点击 走起">
  <div class="one"></div>
  <script>
    btn = document.querySelector('input');
    div = document.querySelector('div');
    btn.onclick = function(){
      div.className = 'one two'
      console.log(div)
    }
  </script> -->
  <!-- <a href="http://www.baidu.com/">百度</a>
  <a href="http://www.jd.com/">京东</a>
  <a href="http://www.taobao.com/">淘宝</a>
  <div class="http">http://www.baidu.com</div>
  <div class="title">百度</div>
  <script>
    var a = document.getElementsByTagName('a');
    var http = document.querySelector('.http');
    var title = document.querySelector('.title')
    for(var i = 0; i<a.length;i++){
      a[i].onclick = function(){
        http.innerHTML = this.href;
        title.innerHTML = this.innerHTML;
        return false;
      }
    }
  </script> -->
  <!-- <a href="http://www.baidu.com/">百度</a>
  <a href="http://www.jd.com/">京东</a>
  <a href="http://www.taobao.com/">淘宝</a>
  <div class='http'>http://www.baidu.com/</div>
  <div class="title">百度</div>
  <script>
    var a = document.getElementsByTagName('a');
    var http = document.querySelector('.http');
    var title = document.querySelector('.title');
    for(var i = 0; i < a.length; i++){
      a[i].onclick = function(){
        http.innerHTML = this.href;
        title.innerHTML = this.innerText;
        return false;
      };
    };
  </script> -->
  <!-- <div class="box">
    <h1>美女画廊</h1> 
    <div class="title">
      <a href="#"><img src="img/1-small.jpg" alt="美女1"></a>
      <a href="javascript:;"><img src="img/2-small.jpg" alt="美女2"></a>
      <a href="javascript:;"><img src="img/3-small.jpg" alt="美女3"></a>
      <a href="javascript:;"><img src="img/4-small.jpg" alt="美女4"></a>
    </div>
    <div class="content">
      <img src="img/placeholder.png" alt="" class='tu'>
    </div>
    <span>请选择一张图片</span>
  </div>
  <script>
    var imgs = document.querySelectorAll('.title img');
    var img_show = document.querySelector('.content img');
    var span = document.querySelector('span');
    
    for(var i = 0; i<imgs.length;i++){
      imgs[i].onclick = function(){
        
        var str = this.src.substring(this.src.lastIndexOf('/')+1)
        console.log(str)
        str = str.substring(0,1)
        console.log(str)
        img_show.src = "img/"+str+".jpg"  
        span.innerHTML = this.alt;
       
      };
    };
  </script>  -->
  <!-- <div class="box">
    <h1>美女画廊</h1>
    <div class='title'>
      <a href="javascript:;"><img src="img/1-small.jpg" alt="美女1"></a>
      <a href="javascript:;"><img src="img/2-small.jpg" alt="美女2"></a>
      <a href="javascript:;"><img src="img/3-small.jpg" alt="美女3"></a>
      <a href="javascript:;"><img src="img/4-small.jpg" alt="美女4"></a>
    </div>
    <div class="content">
      <img src="img/placeholder.png" alt="">
    </div>
    <span>请选择一张图片</span>
  </div>
  <script>
    var imgs = document.querySelectorAll('.title img');
    var img = document.querySelector('.content img');
    var span = document.querySelector('span')
    for(var i = 0; i < imgs.length; i++){
      imgs[i].onclick = function(){
        var str = this.src.substring(this.src.lastIndexOf('/')+1)
        str = str.substring(0,1)
        console.log(str)
        img.src = "img/"+str+".jpg";
        span.innerHTML = this.alt;
      }
    }
  </script> -->
  <!-- <div class="box">
    <h1>美女画廊</h1>
    <div class="title">
      <a href="javascript:;"><img src="img/1-small.jpg" alt="美女1"></a>
      <a href="javascript:;"><img src="img/2-small.jpg" alt="美女2"></a>
      <a href="javascript:;"><img src="img/3-small.jpg" alt="美女3"></a>
      <a href="javascript:;"><img src="img/4-small.jpg" alt="美女4"></a>
    </div>
    <div class="content">
      <img src="img/placeholder.png" alt="">
    </div>
    <span>请选择一张图片</span>
  </div>
  <script>
    var imgs = document.querySelectorAll('.title img');
    var img_show = document.querySelector('.content img');
    var span = document.querySelector('span');
    for(var i = 0; i < imgs.length; i++){
      imgs[i].onclick = function(){
        var str = this.src.substring(this.src.lastIndexOf('/')+1)
        str = str.substring(0,1);
        img_show.src = "img/"+str+".jpg";
        span.innerHTML = this.alt;
      }
    }
  </script> -->
</body>
</html>